import React, { memo, useEffect } from 'react'
import EntirePageWrapper from './style'

import { Pagination } from '@mui/material'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { fetchRoomListAction } from '@/store/modules/entire/actionCreators'

const EntirePage = memo(() => {

  const {roomList,totalCount,currentPage} = useSelector((state) => ({
    currentPage: state.entire.currentPage,
    roomList: state.entire.roomList,
    totalCount: state.entire.totalCount,
  }),shallowEqual)

  // 定义开始条数，结束条数
  const startCount = (currentPage*20) + 1
  const endCount = (currentPage+1) * 20
  // 计算页数
  const totalSize = Math.ceil(totalCount/20)

  // 翻页，获取页面
  const dispatch = useDispatch()
  function handleChange(event, value){
    window.scrollTo(0,0)
    dispatch(fetchRoomListAction(value-1))
  }
  return (
    <EntirePageWrapper>
        <div className="info">
          <Pagination count={totalSize} color="secondary" onChange={handleChange}/>
          <div className="desc">
            第 {startCount} - {endCount} 个房源,共超过{totalCount}个
          </div>
        </div>
    </EntirePageWrapper>
  )
})

export default EntirePage